/*
 * @Author: xueyp
 * @Date: 2020-06-11 19:42:16
 * @Last Modified by: xueyp
 * @Last Modified time: 2020-06-12 16:04:21
 */
<template>
  <div class="propaganda-wrapper">
    <router-view></router-view>
    <!-- tab切换栏 -->
    <div class="propaganda-tab">
      <div id="tab2" class="propaganda-tab-item">
        <router-link to="/home" active-class='propaganda-tab-item-active'>宝姐家介绍</router-link>
      </div>
      <div id="tab1" class="propaganda-tab-item">
        <router-link to="/ip" active-class='propaganda-tab-item-active'>大咖介绍</router-link>
      </div>
    </div>
    <!-- tab切换栏 -->
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped lang="stylus">
.propaganda-wrapper {
  width: 100%;
  height: 100%;
  min-height: 100vh;

  .router-fade-enter-active {
    transition: opacity 1.4s;
  }

  .router-fade-enter, .router-fade-leave-active {
    opacity: 0;
  }

  .propaganda-tab {
    width: 100vw;
    height: 1.31rem;
    // padding: 0 0.36rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    // left: 50%;
    // transform: translateX(-50%);
    box-shadow: 0rem 0rem 0rem rgba(238, 238, 238, 1);
    background-color: #FFFFFF;
    width: 100%;

    .propaganda-tab-item {
      border: 1px solid rgba(123, 44, 63, 1);
      border-radius: 6rpx;
      width: 3.3rem;
      height: 0.6rem;
      line-height: 0.6rem;
      background: rgba(255, 255, 255, 1);
      color: rgba(123, 44, 63, 1);
      font-size: 0.3rem;
      text-align: center;

      a {
        text-decoration: none;
        width: 100%;
        height: 100%;
        display: block;
        color: rgba(123, 44, 63, 1);
      }

      .propaganda-tab-item-active {
        background: rgba(123, 44, 63, 1) !important;
        color: rgba(255, 255, 255, 1) !important;
      }
    }
  }
}
</style>
